<template>
  <div class="apps">
    <div class="apps-bg"></div>
    <div class="apps-content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="暂无更多数据"
        loading-text="上划加载更多"
        @load="onLoad"
      >
        <div class="list" v-for="(data, index) in dataList" :key="index" @click="gotoDetail(data.externalUserid)">
          <img :src="data.avatar" alt="" class="avatar-img" />
          <div class="list-text">
            <div class="text-top">
              <span>{{ data.customerName }}</span>
              <!-- <img src="@/assets/man@2x.png" alt="" v-if="data.gender === 1" />
              <img src="@/assets/woman@2x.png" alt="" v-else /> -->
              <!-- //0-未知 1-男性 2-女性 -->
              <svg-icon class="man-icon" name="man" v-if="data.gender === 1"></svg-icon>
              <svg-icon class="man-icon" name="woman" v-if="data.gender === 2"></svg-icon>
            </div>
            <div class="text-bottom">
              <span>流失时间：{{ data.updateTime }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="list">
          <img src="" alt="" class="avatar-img" />
          <div class="list-text">
            <div class="text-top">
              <span>来自东北的小伙</span>
              <img src="@/assets/man@2x.png" alt="" v-if="true" />
              <img src="@/assets/woman@2x.png" alt="" v-else />
            </div>
            <div class="text-bottom">
              <span>流失时间：2022-05-02 11:24:11</span>
            </div>
          </div>
        </div>
        <div class="list">
          <img src="" alt="" class="avatar-img" />
          <div class="list-text">
            <div class="text-top">
              <span>来自东北的小伙</span>
              <img src="@/assets/man@2x.png" alt="" v-if="true" />
              <img src="@/assets/woman@2x.png" alt="" v-else />
            </div>
            <div class="text-bottom">
              <span>流失时间：2022-05-02 11:24:11</span>
            </div>
          </div>
        </div> -->
      </van-list>
    </div>
  </div>
</template>

<script>
  import { getDataList } from '@/api/group'
  export default {
    data() {
      return {
        loading: false,
        finished: false,
        query: {
          name: '',
          tagIds: '',
          customerType: null,
          trackState: 5,
          // beginTime: "",
          // endTime: "",
          pageNum: 1,
          pageSize: 10,
          delFlag: 0,
          dataScope: false
        },
        dataList: [],
        total: 0
      }
    },
    methods: {
      onLoad() {
        if (this.total >= this.dataList.length) {
          this.query.pageNum++
          this.getList()
        } else {
          this.finished = true
        }
      },
      getList(page) {
        page && (this.query.pageNum = page)
        this.loading = true
        this.finished = false
        // this.dataList = [{customerName: '张三测试', userName:"跟进员工"}]
        getDataList(this.query).then((res) => {
          if (res.code === 200) {
            if (this.query.pageNum > 1) {
              this.dataList = [...this.dataList, ...res.rows]
            } else {
              this.dataList = res.rows
            }
            this.total = Number(res.total)
            if (this.total <= this.dataList.length) {
              this.finished = true
            }
          }
          this.loading = false
        })
      },
      gotoDetail(id) {
        this.$router.push({
          name: 'portrait',
          query: {
            id: id
          }
        })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style lang="less" scoped>
  .apps {
    width: 100%;
    height: 100vh;
    background: #fafafa;
    position: relative;
    .apps-bg {
      width: 100%;
      height: 256px;
      background: linear-gradient(180deg, #eaf5ff 0%, rgba(253, 253, 253, 0) 100%);
    }
    .apps-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-top: 11px;
      display: flex;
      justify-content: center;
      .list {
        width: 351px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.04);
        border-radius: 8px 8px 8px 8px;
        padding: 14px;
        display: flex;
        //   justify-content: center;
        align-items: center;
        margin-bottom: 8px;
        .avatar-img {
          width: 46px;
          height: 46px;
          box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.04);
          border-radius: 2px 2px 2px 2px;
          border: 2px solid #ffffff;
          margin-right: 10px;
        }
        .list-text {
          .text-top {
            span {
              font-size: 14px;
              font-family: 'PingFang SC-粗体', 'PingFang SC';
              font-weight: 600;
              color: #222222;
              line-height: 25px;
            }
            .man-icon {
              width: 16px;
              height: 16px;
              margin-left: 4px;
              vertical-align: middle;
            }
          }
          .text-bottom {
            font-size: 13px;
            font-family: 'PingFang SC-中等', 'PingFang SC';
            font-weight: normal;
            color: #9f9f9f;
            line-height: 25px;
          }
        }
      }
    }
  }
</style>
